<template>
    <div class="layout">
        <div class="layout" ref="MapView"></div>
        <div class="control">
            <Button @click="fly2China">缩放到中国区域</Button>
            <br><br>
            <Button @click="zoomIn">放大</Button>
            <br>
            <Button @click="zoomOut">缩小</Button>
            <br>
            <br>
            <h4 class="title">自定义缩放区域</h4>
            <br>
            <label>经度 ：</label><Input v-model="foyto.longitude" placeholder="经度" style="width: 150px" />
            <br>
            <br>
            <label>纬度 ：</label><Input v-model="foyto.latitude" placeholder="纬度" style="width: 150px" />
            <br>
            <br>
            <label>高度 ：</label><Input v-model="foyto.height" placeholder="高度" style="width: 150px" />
            <br>
            <br>
            <Button @click="flytoCustom">缩放</Button>
        </div>
    </div>
</template>
<script>
import simpleMap from '@best/libs-cli/simpleMap/index.js'

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
export default {
    data() {
        return {
            foyto: {
                longitude: '',
                latitude: '',
                height: '',
            },
        }
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);
    },
    methods: {
        flytoCustom() {
            if (this.foyto.longitude === '') {
                this.$Message.error({ content: '请输入经度' }); return;
            }
            if (this.foyto.latitude === '') {
                this.$Message.error({ content: '请输入纬度' }); return;
            }
            if (this.foyto.height === '') {
                this.$Message.error({ content: '请输入高度' }); return;
            }
            map.flytoCustom(this.foyto);
        },
        fly2China() {
            map.flytochina();
        },
        zoomIn() {
            map.zoomIn();
        },
        zoomOut() {
            map.zoomOut();
        }
    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style scoped>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}
.title {
    color: #fff;
}
</style>